<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>打开红包</title>
    <style>
        .red-packet-box {
            font-size: 14px;
            background: rgba(0, 0, 0, .5);
            height: 100vh;
            display: -webkit-box;
            display: box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            box-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            box-align: center;
            -webkit-align-items: center;
            align-items: center;
            position: absolute;
            width: 100vw;
            top: 0;left: 0;
            /* animation: fadeIn 1s; */
            display: none;
            opacity: 0;
        }

        .red-packet {
            width: 80%;
            height: 60vh;
            background: #cd533c;
            border-radius: 4px;
            position: relative;
            overflow: hidden;
            transform:perspective(500px);
            transform-style:preserve-3d;
             /* animation: pulse 1s ease-in; */
        }

        .red-packet:after {
            content: '';
            display: block;
            width: 120%;
            height: 40vh;
            position: absolute;
            top: 0;
            left: 0;
            background: #d95940;
            border-radius: 0 0 50% 50%;
            transform: translateX(-9%);
            box-shadow: 0 0 10px #b54935;
        }

        .close {
            width: 44px;
            height: 44px;
            text-align: center;
            line-height: 44px;
            color: #984233;
            position: absolute;
            z-index: 3;
            font-size: 20px;
            transform: scaleX(1.3);
        }

        .container {
            position: relative;
            z-index: 3;
            text-align: center;
            color: #ffe1b2;
            margin-top: 40px;
        }

        .user-pic {
            width: 50px;
            height: 50px;
            overflow: hidden;
            border-radius: 4px;
            margin: 0 auto 10px auto;
        }

        .user-pic img {
            width: 100%;
        }

        .desc {
            margin-top: 5%;
            font-size: 20px;
        }

        .open {
            width: 25vw;
            height: 25vw;
            border-radius: 50%;
            background: #ebcd99;
            line-height: 25vw;
            position: absolute;
            z-index: 3;
            left: 50%;
            bottom: 14vh;
            font-size: 40px;
            text-align: center;
            transform:translateX(-50%) rotatey(0deg);
        }

        .circle {
            width: 10px;
            height: 10px;
            background: #e29a74;
            border-radius: 50%;
            position: absolute;
            left: 50%;
        }
        .circle2 {transform: translateY(100%);}
        .circle3 {transform: translate(-50%,50%);}
        .circle4 {transform: translate(50%,50%);}
        .circle-box {
            position: absolute;
            bottom: 10px;
            width: 100%;
            height: 20px;
        }
        .circle-box:after {
            content: '';
            display: block;
            width: 5px;
            height: 5px;
            background: #cd533c;
            transform: translate(48%,147%) rotate(45deg);
            position: absolute;
            left: 50%;
        }
        @keyframes pulse {
            0% {opacity: 0;transform: scale(.5)}
            50% {opacity: 1;}
            70% {transform: scale(1.1)}
            80% {transform: scale(1)}
            90% {transform: scale(1.1)}
            100% {transform: scale(1)}

        }
        @keyframes fadeIn {
            0% {opacity: 0;}
            100% {opacity: 1;}
        }
        @keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
        }
        @keyframes scaleOut {
            0% {opacity: 1;}
            100% {opacity: 0;transform: scale(.5)}
        }

    </style>
</head>

<body>
	<button id="openBtn">打开红包</button>
	<div class="red-packet-box">
		<div class="red-packet">
			<div class="close" taomode onclick="closePopup()">X</div>
			<div class="container">
				<div class="user-pic">
					<img class="user-pic" src="https://gma.alicdn.com/bao/uploaded/i3/35761641/O1CN011NzcPZ3E6461RWP_!!0-saturn_solar.jpg_400x400.jpg_.webp"
						alt="">
				</div>
				<p>小米8</p>
				<p>给你发了个红包</p>
				<p class="desc">恭喜发财，大吉大利</p>
			</div>
			<div class="open" tapmode onclick="openRedPacket()">開</div>
			<div class="circle-box">
				<div class="circle circle1"></div>
				<div class="circle circle2"></div>
				<div class="circle circle3"></div>
				<div class="circle circle4"></div>
			</div>
		</div>
	</div>
    <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.js"></script>
    <script>
        var deg = 0;
        $('#openBtn').click(function() {
            $('.red-packet-box').attr('style',' ');
            $('.red-packet-box').css('display','flex');
            setTimeout(function(){
                $('.red-packet-box').css('animation','fadeIn 1s forwards');
                $('.red-packet').css('animation','pulse 1s ease-in forwards');
            },100);
        })
        function rotate() {
            deg += 10;
            $('.open').css('transform','translateX(-50%) rotatey('+deg+'deg)')
            if (deg < 360) {
                window.requestAnimationFrame(rotate);
                return ;
            }
            deg = 0;
        }
        function openRedPacket() {
            window.requestAnimationFrame(rotate);
        }
        function closePopup() {
            $('.red-packet-box').css('animation','fadeOut 1.5s forwards');
            $('.red-packet').css('animation','scaleOut 1.5s forwards');
            setTimeout(()=>{
                $('.red-packet-box').css('display','none');
            },1500);
        }
    </script>
</body>

</html>
